<template>
  <div class="ktv-wrap">
    <swiper :swiper-list="this.datas.pics"></swiper>
    <name :title="this.datas.name"></name>
    <stars :star-info="{score:this.datas.score,star:this.datas.star}"></stars>
    <address-detail :title="this.datas.address"></address-detail>
    <price :title="this.datas.default_price"></price>
    <service :service-info="this.datas.service"></service>
  </div>
</template>

<script>
  import Swiper from 'components/ScrollWrapper/Sub/Swiper.vue';
  import Name from 'components/ScrollWrapper/Detail/Sub/Name.vue';
  import Stars from 'components/ScrollWrapper/Detail/Sub/Stars.vue';
  import AddressDetail from 'components/ScrollWrapper/Detail/Sub/Address.vue';
  import Price from 'components/ScrollWrapper/Detail/Sub/Price.vue';
  import Service from 'components/ScrollWrapper/Detail/Sub/Service.vue';

  export default {
    name: 'MassageDetail',
    props: {
      datas: Object
    },
    components: {
      Swiper,
      Name,
      Stars,
      AddressDetail,
      Price,
      Service
    }
  }
</script>

<style lang="scss" scoped="scoped">
  .ktv-wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    background-color: #FFFFFF;
  }
</style>
